<template>
  <div style="width: 100%;height: 100%">
    <h3>我的应用</h3>
    <div style="clear: both;"></div>
    <draggable
      class="list-group"
      v-model="list"
      v-bind="dragOptions"
      :move="onMove"
      @start="drag = true"
      @end="drag = false">
      <transition-group type="transition" :name="!drag ? 'flip-list' : null">
        <div class="list-group-item" v-for="data in list" :key="data.id">
          <div v-show="isShowDel" style="position: relative" @click="delNoHasContents(data.id)">
            <img slot="label" class="list-group-item_img">
          </div>
          <div class="list-group-item-div" @click="data.fixed = !data.fixed" aria-hidden="true">
            <div class="list-group-item-div1">
              <img slot="label" style="width:20px;">
            </div>
            {{ data.name }}
          </div>
        </div>
      </transition-group>
    </draggable>
    <div style="clear: both;"></div>
    <div class="admin-drag-add" v-show="isShowbtn" @click="addMethod">
      <span>+</span>
      <span>添加</span>
    </div>
    <div style="width: 100%;height: 10px;background: #F5F5F5;margin-top: 20px"></div>
    <div style="width: auto;height: auto">
      <h3>全部应用</h3>
      <div class="admin-drag-all" v-for="data in list2" :key="data.id">
        <div style="text-align: left;padding-left: 10px;color: #000000">{{data.name}}</div>
        <div style="clear: both;"></div>
        <div class="admin-drag-all-div" v-for="(data2,index1) in data.children" :key="index1">
          <div v-show="isShowAdd" style="position: relative" @click="addHasContents(data2.id,data2.name)">
            <img slot="label" class="list-group-item_img2">
          </div>
          <div class="list-group-item-div">
            <div class="admin-drag-all-div2">
              <img slot="label" style="width:20px;">
            </div>
            {{ data2.name }}
          </div>
        </div>
        <div style="clear: both;"></div>
      </div>
    </div>
  </div>

</template>

<script>
  import draggable from "vuedraggable";
  export default {
    name: "admin-drag",
    display: "Transitions",
    order: 9,
    components: {
      draggable
    },
    data() {
      return {
        isShowDel: false,
        isShowbtn: true,
        isShowAdd: false,
        list:[
          {
            "id": "1",
            "name": "菜单1"
          },
          {
            "id": "2",
            "name": "菜单2"
          }
        ],
        drag: false,
        list2: [
          {
            "id": "aaaaaaa",
            "name": "系统管理1",
            "menuType": 0,
            "children": [
              {
                "id": "bbbbbbbb",
                "name": "菜单管理",
                "menuType": 2,
              },
              {
                "id": "cccccccc",
                "name": "新增",
                "menuType": 1
              },
              {
                "id": "dddddddddd",
                "name": "修改",
                "menuType": 1
              }
            ]
          },
          {
            "id": "eeeeeeeee",
            "name": "设备管理2",
            "menuType": 0,
            "children": [
              {
                "id": "ffffffffffff",
                "name": "新增222",
                "menuType": 1
              },
              {
                "id": "gggggggggg",
                "name": "修改2222",
                "menuType": 1
              }
            ]
          }
        ]
      };
    },
    methods: {
      onMove(e, originalEvent) {
        //不允许拖拽
        if (e.draggedContext.element.name == "菜单19") return false;
        return true;
      },
      /*添加块*/
      addMethod() {
        this.isShowDel = true;
        this.isShowbtn = false;
        this.isShowAdd = true;
      },
      /*删除*/
      delNoHasContents: function (listId) {
        // this.list.splice(index, 1);
        let newArr = this.list.filter(item =>item.id !== listId)
        this.list = newArr
      },
      /*添加*/
      addHasContents:function(index, addName){
        alert(11)
        this.list = this.list.concat({id:index,name:addName});
        this.list2.forEach((list2item,list2index) => {
          list2item.children.forEach((list2item2,list2index2) => {
            if(list2item2.id == index){
              // let newArr2 = list2item.children.filter(item =>item.id !== list2item2.id)
              // console.log(newArr2)
              getFilterArr(this.list2, list2item2.id)
              // list2item.children.splice(list2item2.id,1);
            }
          })
        });
      }
    },
    computed: {
      dragOptions() {
        return {
          animation: 200,
          group: "description",
          disabled: false,
          ghostClass: "ghost"
        };
      }
    }
  };
  function getFilterArr(arr, tar) {
    return arr.filter(function(item, i) {
      if (item.children) {
        item.children = getFilterArr(item.children, tar)
      }
      return item.id !== tar;
    })
  }
</script>

<style>
  .flip-list-move {
    transition: transform 0.5s;
  }

  .no-move {
    transition: transform 0s;
  }

  .list-group {
    width: 100%;
    height: auto;
  }

  .list-group-item_img {
    position: absolute;
    width: 16px;
    right: 0;
    margin-right: 4px;
  }
  .list-group-item_img2{
    position: absolute;
    width: 18px;
    right: 0;
    margin-right: 4px;
  }

  .list-group-item {
    cursor: move;
    float: left;
    width: 20%;
  }

  .list-group-item-div {
    padding: 10px 0px;
  }

  .admin-drag-add {
    border: 1px dashed #cccccc;
    padding: 10px;
    margin: 0px 14px;
    border-radius: 5px;
  }

  .admin-drag-all {
    width: 100%;
    height: auto;
    margin-top: 8px;
  }

  .admin-drag-all-div {
    float: left;
    width: 20%;
  }
</style>
